<template>
	<view class="uni_box">
		<!-- 顶部兼容组件APP端 -->

		<view class="newcontent">
			<Nheader :issou="false"></Nheader>
			<view class="tioneview">
				<image :src="bg?bg:'/static/tiku/tibg.png'" class="tibg" mode=""></image>
				<view class="souview">
					<text class="jiansuo">快速全站检索</text>
					<view class="souitem">
						<view class="souleft">
							<u-input v-model="keyword" type="text" :border="false" placeholder="请输入关键词"/>
						</view>
						<text class="soubtn" @click="getsearch">搜索</text>
					</view>
				</view>
			</view>
			<!-- 热门搜索 -->
			<view class="remen" v-if="soulist">
				<text class="retit">热门搜索</text>
				<view class="rebiao">
					<view class="biaoitem" v-for="(item,index) in soulist" :key="index" @click="souClick(item)">{{item}}</view>
				</view>
			</view>
			<!-- 体验课堂 -->
			<view class="ketan plr">

				<view class="tabview">
					<u-tabs :list="tiyanlist" :is-scroll="true" :current="tiyantabcurrent" @change="tiyantabchange"
						active-color="#FA7938" inactive-color="#CCCCCC"></u-tabs>
				</view>
				<!-- <view class="tilist" v-if="tiyantabcurrent==0">
					<view class="tiitem" v-for="(item,index) in tiyandata" :key="index" @click="getToDetail(item,1)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">{{item.title}}</text>
							<text class="timiao">{{item.subtitle}}</text>
							<view class="linview">
								<view class="liji" v-if="item.button_text">{{item.button_text}}</view>
								<text class="mian" v-if="item.free_text">{{item.free_text}}</text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="tilist-xue" v-if="tiyantabcurrent==0">
					<view class="tiitem" v-for="(item,index) in list" :key="index"  @click="getToDetail(item,2)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">{{item.title}}</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">{{item.price}}</text></text>
								<text class="mian">{{item.buy_nums}}人已购买</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 资讯-融跃 -->
			<view class="ketan plr" v-if="tiyantabcurrent==1">
				<!-- <view class="nbiao">
					<image src="/static/home/zixun.png" class="zhiboicon" mode="" style="width: 36rpx;height: 38rpx;"></image>
					<text class="ftit">资讯·融跃</text>
				</view> -->
				<!-- <view class="kaoview">
					<view class="kaoleft" :class="zixunheadinfo.id==item.id?'kactive':''" v-for="(item,index) in zixunhead" :key="index" @click="ziClick(item)">{{item.name}}</view>
					
				</view>
				<view class="tabview" style="margin-top: 20rpx;">
					<u-tabs :list="zixunlist" :is-scroll="true" :current="zixuntabcurrent" @change="zixuntabchange"
						active-color="#FA4E4E" inactive-color="#CCCCCC"></u-tabs>
				</view> -->
				<view class="tilist-kao">
					<view class="kaoitem" v-for="(item,index) in list" :key="index" @click="getToDetail(item,4)">
						<view class="kaoleft">
							<text class="kaotit">{{ item.title }}</text>
							<view class="kaobot">
								<view class="kaoqi">
									<image src="/static/home/zixun.png" class="ticon" mode=""></image>
									<text class="sjians">{{item.time}}</text>
								</view>
								<view class="kaoqi">
									<image src="/static/home/zixun.png" class="ticon" mode=""></image>
									<text class="sjians">{{item.views}}</text>
								</view>
							</view>
						</view>
						<image :src="item.image" class="itemimg" mode=""></image>
					</view>
				</view>
				<!-- <view class="cahzhibo" @click="getmore(4)">
					更多{{zixuninfo.name}}资讯
				</view> -->
			</view>



			<!-- 预约弹窗 -->
			<view class="st">
				<u-popup v-model="yueshow" mode="center" @close="yueshow=false" width="80%" :closeable="true">
					<view class="stpop">
						<!-- <view class="chaview">
							<image class="macha" src="@/pages_subject/static/img/macha.png" mode="" />
						</view> -->
						<image class="mapop" mode="widthFix" :src="taninfo.image" />
						<!-- <text class="matit">注：{{taninfo.title}}</text> -->
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	// import classifiy from '@/components/classifiy/classifiy'
	import {
		loginLive
	} from "@/utils/liveApp.js";
	export default {
		data() {
			return {
				lunlist: [
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					// 	title: '身无彩凤双飞翼，心有灵犀一点通'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					// }
				],
				ClassList: [
					// {
					// 		id:  4,
					// 		name:  "生活",
					// 		icon:  [
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				}
					// 	]
					// }
				],
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 1500,
				swcurrent: 0,
				count: 5,
				pinlist: [{
						avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						nickname: '测试昵称',
						content: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						nickname: '测试昵称',
						content: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						nickname: '测试昵称',
						content: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tablist: [{
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				}, {
					name: 'CPA'
				}, {
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				}, {
					name: 'CPA'
				}],
				tabcurrent: 0,
				currentIndex: 0,
				posterData: [
					'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
					'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
					'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				],
				zixuninfo: {

				},
				zixunlist: [],
				zixundata: [], //咨询数据
				zixuntabcurrent: 0,

				tushulist: [], //图书列表
				tushuinfo: {},
				tushutabcurrent: 0,
				tushudata: [],

				xuexilist: [], //学习融跃
				xuexiinfo: {},
				xuexitabcurrent: 0,
				xuexidata: [],

				tiyanlist: [], //体验课程
				tiyaninfo: {},
				tiyantabcurrent: 0,
				tiyandata: [],

				zhibolist: [], //直播课堂
				taninfo: {
					image: '',
					title: ''
				},
				yueshow: false,

				zixunhead:[],
				zixunheadinfo:[],
				shizidata:[],
				
				bg:'',
				nums:[],
				keyword:'',
				soulist:[],

				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
			}
		},
		components: {
			// classifiy
		},
		computed: {},

		mounted() {

		},
		async onLoad() {
			this.getinit()
		},
		created() {
			
		},
		async onShow() {
			// this.getinit()
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			getinit() {
				// this.CateList()
				// this.fgetCate();//分类
				// this.fgetZhiboList(); //直播课程
				// this.fgetBanner(); //轮播图
				// this.fgetMenu(); //金刚区
				// this.getshizi();//师资
				this.fsougetBanner();//搜索背景图
				this.fgetKeywords();//热门标签
				this.fgetSearchType();//类型
				this.getList()
			},
			async CateList() {
				let res = await this.$u.api.getCate({});
				this.zixunlist = res
				this.tushulist = res
				// this.xuexilist = res
				this.tiyanlist = res
				if (res) {
					//咨询
					this.zixuninfo = res[0]
					this.fzixunhead();//资讯标题数组
					
					// 图书
					this.tushuinfo = res[0]
					this.gettushu();
					// // 学习
					// this.xuexiinfo = res[0]
					// this.getxuexi();
					// 体验课程
					this.tiyaninfo = res[0]
					this.gettiyan();
				}
			},
			async fsougetBanner() { //背景图
				let res = await this.$u.api.sougetBanner();
				this.bg = res[0].image
			},
			async fgetKeywords(){
				let res = await this.$u.api.getKeywords();
				this.soulist = res
			},
			souClick(item){
				this.keyword = item
				this.getsearch()
			},
			async fgetSearchType(){
				let res = await this.$u.api.getSearchType();
				// this.soulist = res
				this.tiyanlist = res

				console.log(this.tiyanlist)
			},
			async getList(){
				if(this.tiyantabcurrent == 0){
					//课程
					let res = await this.$u.api.sougetComboList({
						keywords:this.keyword,
						page:this.page
					});
					// this.tiyandata = res.list
					this.last_page = res.lastpage;
					let list = res.list;
					this.list = this.page == 1 ? list : [...this.list, ...list];
					if(this.page >= this.last_page){
						this.status = 'nomore';
					}
				}else if(this.tiyantabcurrent == 1){
					//资讯
					let res = await this.$u.api.sougetArticleList({
						keywords:this.keyword,
						page:this.page
					});
					// this.zixundata = res.list
					this.last_page = res.lastpage;
					let list = res.list;
					this.list = this.page == 1 ? list : [...this.list, ...list];
					if(this.page >= this.last_page){
						this.status = 'nomore';
					}
				}
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getsearch(){
				this.getClear()
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			


			async fgetZhiboList() { //直播课程
				let res = await this.$u.api.getZhiboList({});
				this.zhibolist = res
			},
			async getzixun() {
				let res = await this.$u.api.getNewsList({
					cate: this.zixuninfo.id,
					type: this.zixunheadinfo.id
				});
				this.zixundata = res
			},
			async gettushu() {
				let res = await this.$u.api.getBookList({
					cate: this.tushuinfo.id
				});
				this.tushudata = res
			},
			async getxuexi() {
				let res = await this.$u.api.getStudyList({
					cate: this.xuexiinfo.id
				});
				this.xuexidata = res
			},
			async gettiyan() {
				let res = await this.$u.api.getTiyanList({
					cate: this.tiyaninfo.id
				});
				this.tiyandata = res
			},
			async fgetBanner() {
				let res = await this.$u.api.getBanner({
					mark: 'h5-index'
				});
				this.lunlist = res
			},
			async fzixunhead(){
				let res = await this.$u.api.getNewsType({
					
				});
				this.zixunhead = res
				this.zixunheadinfo = res[0]
				this.getzixun();
			},
			ziClick(item){
				this.zixunheadinfo = item
				this.getzixun();
			},

			swchange(e) {
				// console.log(e)
			},
			tabchange(e) {
				this.tabcurrent = e
			},
			swiperChange(event) {
				console.log(event)
				this.currentIndex = event.detail.current
				this.currentPoster = this.posterData.poster[this.currentIndex]
				// console.log(this.currentPoster)
			},
			previewImage(index, url) {
				console.log('index', index)
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.posterData.poster //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			zixuntabchange(e) {
				this.zixuntabcurrent = e
				let zixunlist = this.zixunlist
				this.zixuninfo = zixunlist[e]
				this.getzixun();
			},
			tushutabchange(e) {
				this.tushutabcurrent = e
				let tushulist = this.tushulist
				this.tushuinfo = tushulist[e]
				console.log(this.tushuinfo)
				this.gettushu();
			},
			xuexitabchange(e) {
				this.xuexitabcurrent = e
				let xuexilist = this.xuexilist
				this.xuexiinfo = xuexilist[e]
				this.getxuexi();
			},
			tiyantabchange(e) {
				this.tiyantabcurrent = e
				let tiyanlist = this.tiyanlist
				this.tiyaninfo = tiyanlist[e]
				// console.log(this.tiyaninfo)
				// this.getList();
				this.getClear()
			},
			getprohome() {
				this.navrouter("/pages/tabbar/ZhiboCenter"); //直播中心
			},
			async getshizi(){
				let res = await this.$u.api.getTeacherList({
					// cate_id:this.cate_id
				});
				this.shizidata = res
				// console.log(this.shizidata)
			},
			swclick(e) {
				this.toPage(this.lunlist[e])
			},
			getToDetail(item, type) {
				if (type == 1) {
					//试听中心跳转
					if (item.button_type == 0 || item.button_type == 2) {
						//立即领取
						this.taninfo.image = item.wechat_image
						this.yueshow = true
					} else {
						this.toPage(item)
					}
				} else if (type == 2) {
					//学习
					this.toPage(item)
				} else if (type == 3) {
					//书籍
					this.toPage(item)
				} else if (type == 4) {
					//资讯
					this.toPage(item)
				}
			},
			getmore(type) {
				if (type == 1) {
					//更多试学
					this.navrouter("/pages/tabbar/ShiTingCenter?id=" + this.tiyaninfo.id); //直播中心
				} else if (type == 2) {
					//学习
					this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?id=" + this.xuexiinfo.id + '&leitype=1'); //学习
				} else if (type == 3) {
					//书籍
					this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?id=" + this.tushuinfo.id + '&leitype=2'); //图书中心
				} else if (type == 4) {
					//资讯
					this.navrouter("/pages/tabbar/ZiXunList?id=" + this.zixuninfo.id); //资讯列表
				}
			},
			async openLive(item) {
				// h5
				// #ifdef H5
				this.navrouter(`/pages_subject/live/index?id=${item.id}`);
				// #endif
				// #ifdef APP
				const res = await this.$u.api.getZhiboDetail({
					id: item.id,
				});
				loginLive("C907590113F5A48D9C33DC5901307461", "677D7D6D589120DA");
				// #endif
			},
			zhilistClick(item) {
				//点击直播列表
				if (item.button_type == 0) {
					//立即预约
					this.taninfo.image = item.yuyue_image
					this.yueshow = true
				} else if (item.button_type == 2) {
					//跳转直播回放
					this.openLive(item)
				} else if (item.button_type == 1) {
					//跳转正在直播
					this.openLive(item)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.newcontent {
		min-height: 100vh;
		padding-bottom: 120rpx;
		background-color: #fff;

		.lun {
			margin: 20rpx 0 50rpx;
		}

		.plr {
			padding: 0 30rpx;
		}

		.ketan {
			// padding: 0 30rpx;
			margin-bottom: 40rpx;
			margin-top: 10rpx;
		}
		.remen{
			margin: 30rpx 30rpx 10rpx;
			.retit{
				display: block;
				color: #333;
				font-weight: 500;
				font-size: 30rpx;
				margin-bottom: 30rpx;
			}
			.rebiao{
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;
				.biaoitem{
					background: #F8F8F8;
					border-radius: 10rpx;
					padding: 8rpx 15rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					display: flex;
					margin: 0 30rpx 20rpx 0;
				}
			}
		}

		.nbiao {
			display: flex;
			flex-direction: row;
			align-items: center;

			.zhiboicon {
				width: 38rpx;
				margin-right: 15rpx;
				height: 36rpx;
			}

			.ftit {
				font-family: PingFangSC;
				font-weight: 800;
				font-size: 38rpx;
				color: #111111;
			}
		}

		.nbtwo {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 49rpx 0 40rpx;

			.icons {
				width: 49rpx;
				height: 14rpx;

			}

			.zhitit {
				display: inline-block;
				font-family: PingFangSC;
				font-weight: 800;
				font-size: 34rpx;
				color: #333333;
				margin: 0 28rpx;
			}
		}

		.neitwo {
			margin-bottom: 30rpx;

			.swiper {
				// width: 50%;
				flex: 1;
				// margin: 0 20rpx;
				height: 437rpx;

				.swiperitem {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 360rpx !important;
					margin-right: 30rpx;
					height: 437rpx !important;

					// background: #000;
					// box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(216,216,216,0.35);
					// border-radius: 16rpx;
					.sview {
						width: 90%;
						height: 95%;
						display: flex;
						flex-direction: column;
						box-shadow: 0px 0px 12px 0px rgba(216, 216, 216, 0.35);
						border-radius: 8px;
						background-color: #fff;
						padding: 30rpx;
						position: relative;

						.rbiao {
							position: absolute;
							right: 0;
							top: 20rpx;
							width: 80rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.leis {
								position: absolute;
								width: 100%;
								height: 100%;
							}

							.rbview {
								position: relative;
								width: 100%;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #FFFFFF;
								padding-top: 10rpx;
							}
						}

						.rbati {
							font-family: PingFangSC;
							font-weight: bold;
							font-size: 28rpx;
							color: #111111;
							display: block;
							margin: 30rpx 0 20rpx;
						}

						.sjian {
							width: 145rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.lunone {
							display: flex;
							flex-direction: row;
							align-items: center;
							width: 100%;
							margin-bottom: 15rpx;

							.jtou {
								width: 66rpx;
								height: 66rpx;
								margin-right: 15rpx;
								border-radius: 50%;
							}

							.jiright {
								display: flex;
								flex-direction: column;

								.jiname {
									// max-width: 80%;
									display: inline-block;
									font-weight: 500;
									font-size: 24rpx;
									color: #111111;
								}

							}

						}

						.lunwen {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: auto;

							.hui {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 130rpx;
								height: 52rpx;
								background: linear-gradient(-90deg, #FA4E4E, #FD894F);
								border-radius: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #FFFFFF;
							}

							.mfei {
								margin-left: auto;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #46C564;
							}
						}

						.iosheight {
							height: 196rpx;
						}

					}
				}

				.cetit {
					font-size: 20px;
					font-weight: 500;
					display: block;
					margin-bottom: 20rpx;
					color: rgba(255, 255, 255, 1);
					font-family: "Tangerine" !important;
				}
			}

			.xians {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.swiper-item {
				position: relative;

				.jiaobg {
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}

			.twoimg {
				transform: rotate(180deg);
			}
		}

		.cahzhibo {
			height: 80rpx;
			border-radius: 10rpx;
			border: 1px solid #EEEEEE;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.tabview {
			border-bottom: 1rpx solid #eee;

		}

		.tilist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 35rpx;

			.tiitem {
				width: 48%;
				display: flex;
				flex-direction: column;
				margin-bottom: 40rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.3);

				.itemimg {
					width: 100%;
					height: 200rpx;
					border-radius: 26rpx;
				}

				.itembot {
					padding: 25rpx 20rpx;

				}

				.tbiao {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					display: block;
					margin-bottom: 15rpx;

				}

				.timiao {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}

				.linview {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 25rpx;

					.liji {
						padding: 15rpx 20rpx;
						background: #FFF0F0;
						border-radius: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FA4E4E;
					}

					.mian {
						margin-left: auto;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #46C564;
					}
				}

			}

			.tiitem:nth-child(even) {
				margin-left: auto;
			}
		}

		.tilist-xue {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 35rpx;

			.tiitem {
				width: 48%;
				display: flex;
				flex-direction: column;
				margin-bottom: 40rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.3);

				.itemimg {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx 10rpx 0 0;
				}

				.itembot {
					padding: 25rpx 20rpx;

				}

				.tbiao {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					display: block;
					margin-bottom: 15rpx;

				}

				.timiao {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}

				.linview {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 30rpx;

					.liji {
						padding: 15rpx 20rpx;
						background: #FFF0F0;
						border-radius: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FA4E4E;
					}

					.mian {
						margin-left: auto;
						font-weight: 500;
						font-size: 20rpx;
						color: #CCCCCC;
					}

					.jine {
						font-family: DIN;
						font-weight: bold;
						font-size: 20rpx;
						color: #FA4E4E;

						.jinnum {
							font-size: 32rpx;
						}
					}
				}

			}

			.tiitem:nth-child(even) {
				margin-left: auto;
			}
		}

		.tilist-jiaocai {
			margin-top: 40rpx;

			.tiitem-two {
				display: flex;
				flex-direction: row;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;

				.itemimg {
					width: 260rpx;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.itembot {
					flex: 1;
					display: flex;
					flex-direction: column;

					.tbiao {
						max-width: 100%;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						display: inline-block;
					}

					.timiao {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						display: inline-block;
						margin-top: 20rpx;
					}

					.linview {
						display: flex;
						margin-top: auto;
						flex-direction: row;
						align-items: center;

						.jine {
							font-family: DIN;
							font-weight: bold;
							font-size: 20rpx;
							color: #FA4E4E;

							.jinnum {
								font-size: 32rpx;
							}

						}

						.mian {
							margin-left: auto;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #46C564;
						}
					}
				}
			}
		}

		.kaoview {
			width: 100%;
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 40rpx;

			.kaoleft {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 28rpx;
				color: #CCCCCC;
				height: 100%;
			}

			.kactive {
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.tilist-kao {
			margin-top: 40rpx;

			.kaoitem {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.3);
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 30rpx;
				align-items: center;

				.itemimg {
					width: 230rpx;
					height: 150rpx;
					margin-left: auto;
					border-radius: 20rpx;
				}

				.kaoleft {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-right: 20rpx;

					.kaotit {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
					}

					.kaobot {
						margin-top: 50rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.kaoqi {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-right: 40rpx;

							.ticon {
								width: 18rpx;
								height: 18rpx;
								margin-right: 10rpx;
							}

							.sjians {
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
			}
		}

		.xie {
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #333333;
				text-align: center;
			}
		}

		.pinlist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.pinitem {
				width: 31%;
				height: 120rpx;
				background-color: #fff;
				padding: 30rpx;
				margin: 0 15rpx 15rpx 0;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.26);
				border-radius: 4rpx;

				.Kaplan_logo {
					width: 150rpx;

				}
			}
		}

		.shiliview {
			margin-top: 30rpx;

			.swiper-block-shili {
				height: 790rpx;
				width: 100%;

				.swiper-item-shili {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					overflow: unset;
					position: relative;

					.skaoview {
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202, 205, 217, 0.4);
						border-radius: 10rpx;
						border: 1px solid #EEEEEE;
						position: relative;

						.kaooneimg {
							height: 400rpx;
							position: relative;
							width: 100%;
						}

						.jinpai {
							padding: 30rpx;
							display: flex;
							flex-direction: column;

							.jinname {
								font-family: PingFangSC;
								font-weight: bold;
								font-size: 32rpx;
								color: #111111;
								display: block;
								margin-bottom: 15rpx;
							}

							.bqian {
								display: flex;
								flex-direction: row;

								.qianitem {
									padding: 6rpx 10rpx;
									background: #FEF6F2;
									border-radius: 4rpx;
									border: 1px solid #FFDDCC;
									font-family: PingFang SC;
									font-weight: 500;
									font-size: 22rpx;
									color: #FA7938;
									display: inline-block;
									margin-right: 10rpx;
								}
							}
						}
					}

					.slide-image {
						height: 640rpx;
						width: 500rpx;
						border-radius: 9rpx;
						box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
						margin: 0rpx 40rpx;
						z-index: 1;
					}

					.active {
						transform: scale(1.14);
						transition: all 0.2s ease-in 0s;
						z-index: 20;
					}
				}
			}

		}
	}

	.yin {
		background: #F6F7FB !important;
		padding: 30rpx !important;
	}

	.st {
		/deep/.u-mode-center-box {
			background-color: transparent;
		}

		.stpop {
			background-color: #fff;
			height: 550rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.mapop {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 50rpx;
			}

			.matit {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FA7938;
			}

			.chaview {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202, 205, 217, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				// position: relative;
				.macha {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	/deep/uni-swiper {
		height: 165px;
	}

	.tioneview{
		position: relative;
		height: 320rpx;
		width: 100%;
		.tibg{
			position: absolute;
			height: 100%;
			width: 100%;
		}
		.souview{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			.jiansuo{
				color: #fff;
				font-size: 35rpx;
				font-weight: 500;
			}
			.souitem{
				margin-top: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 90%;
				// margin-right: 30rpx;
				// flex: 1;
				.souleft{
					// width: 80%;
					height: 80rpx;
					background-color: #fff;
					border-radius: 10rpx;
					display: flex;
					padding: 0 20rpx;
					align-items: center;
					flex: 1;
				}
				.soubtn{
					margin-left: 30rpx;
					width: 140rpx;
					// flex: 1;
					height: 80rpx;
					background: #fa7938;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 30rpx;
					font-weight: 500;
				}
			}
		}
	}
	.titwoview{
		margin: -120rpx 30rpx 48rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 16rpx solid rgba(255, 91, 0, 0.36);
		position: relative;
		height: 240rpx;
		padding: 20rpx 35rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		// background: #FFFFFF;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(255,91,0,0.36);
		// border-radius: 14rpx;
		.tibiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			display: block;
			text-align: center;
		}
		.tishu{
			display: flex;
			flex-direction: row;
			margin-top: 37rpx;
			.shuitem{
				position: relative;
				width: 60rpx;
				height: 84rpx;
				margin: 0 8rpx;
				.tiicon{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.shuview{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: DIN;
					font-weight: bold;
					font-size: 56rpx;
					color: #B0680C;
				}
			}
		}
	}

</style>